<template>
  <div class="body-box">
    <!-- 第三行数据 -->
    <div class="content-box">
      <div class="left">
        <div :style="{ height: lHOne1 + 'px', }">
          <LeftTop :refresh-num="refreshNum" />
        </div>
        <div :style="{ height: lHOne2 + 'px' }">
          <div class="box-title">物联设备</div>
          <dv-border-box-10 :style="{ height: lHOne2 - titHOne + 'px' }">
            <LeftMiddle :refresh-num="refreshNum" :height="lHOne2 - titHOne" :screenHeight="screenHeight"
              :lWidth="lWidth" />
          </dv-border-box-10>
        </div>
        <div :style="{ height: lHOne3 + 'px' }">
          <div class="box-title xiegang1">能耗态势</div>
          <dv-border-box-10 :style="{ height: lHOne3 - titHOne + 'px' }">
            <LeftBottom :refresh-num="refreshNum" :height="lHOne3 - titHOne" />
          </dv-border-box-10>
        </div>
      </div>
      <div class="center">
        <!-- 告警弹窗 -->
        <!-- <el-alert class="alert_sty" v-if="isSubscribe == true" :title="responseData.description" type="warning" show-icon
          @close="closeAlert" close-text="知道了">
        </el-alert> -->
        <div :style="{ height: lHOne1 + 'px', }">
          <CenterTop :refresh-num="refreshNum" />
        </div>
        <div :style="{ height: mHOne1 + 'px', position: 'relative' }">
          <div class="box-title-box box1">
            <div class="box-title2 bt2-bg">分布图</div>
          </div>
          <ChinaMap :refresh-num="refreshNum" />
          <div class="box-title-box">
            <div class="box-title2 bt2-bg">12个月综合数据</div>
            <div class="box-title2" style="cursor: pointer;">视频选择</div>
          </div>
        </div>
        <div :style="{ height: mHOne2 + 'px' }">
          <dv-border-box-10>
            <CenterBottom :refresh-num="refreshNum" />
          </dv-border-box-10>
        </div>
      </div>
      <div class="right">
        <div :style="{ height: lHOne1 + 'px' }">
          <RightTop :refresh-num="refreshNum" />
        </div>
        <div :style="{ height: rHOne1 + 'px' }">
          <div class="box-title xiegang2">服务站工单告警信息</div>
          <dv-border-box-10 :style="{ height: rHOne1 - titHOne + 'px' }">
            <RightBottom :refresh-num="refreshNum" />
          </dv-border-box-10>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import SockJS from "sockjs-client";
// import Stomp from "stompjs";
import ChinaMap from "./equipment/center/mapNew3D";
import LeftTop from "./equipment/left/leftTop";
import LeftMiddle from "./equipment/left/leftMiddle";
import LeftBottom from "./equipment/left/leftBottom";
import RightBottom from "./equipment/right/rightBottom";
import RightTop from "./equipment/right/rightTop";
import CenterTop from "./equipment/center/centerTop";
import CenterBottom from "./equipment/center/centerBottom";

export default {
  name: "total",
  data() {
    return {
      stompClient: null,
      loading: true,
      refreshNum: "",

      isSubscribe: false,
      responseData: null,
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    };
  },
  components: {
    ChinaMap,
    LeftTop,
    LeftMiddle,
    LeftBottom,
    RightBottom,
    RightTop,
    CenterTop,
    CenterBottom,
  },
  watch: {
    "$store.state.settings.isFullscreen": {
      handler: function (newVal, oldVal) {
        this.$nextTick(() => {
          const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
          this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
          if (newVal) {
            this.screenHeight = screenHeight + 120
          } else {
            this.screenHeight = screenHeight
          }
          console.log('监听isFullscreen》》》》》》》   ', newVal, oldVal, window.innerHeight, document.documentElement.clientHeight, document.body.clientHeight);
        })
      }
    }
  },
  computed: {
    lWidth() {
      return Math.round(this.screenWidth * 0.26822);  // 左侧宽度
    },
    mWidth() {
      return Math.round(this.screenWidth * 0.4427);  // 中间宽度
    },
    rWidth() {
      return Math.round(this.screenWidth * 0.2526);  // 右侧宽度
    },
    lHOne1() {
      return Math.round(this.screenHeight * 130 / 1080);  //需要监听的数据
    },
    lHOne2() {
      return Math.round(this.screenHeight * 395 / 1080);  //需要监听的数据
    },
    lHOne3() {
      return Math.round(this.screenHeight * 380 / 1080);  //需要监听的数据
    },
    mHOne1() {
      return Math.round(this.screenHeight * 525 / 1080);  //需要监听的数据
    },
    mHOne2() {
      return Math.round(this.screenHeight * 275 / 1080);  //需要监听的数据
    },
    rHOne1() {
      return Math.round(this.screenHeight * 792 / 1080);  //需要监听的数据
    },
    titHOne() {
      return Math.round(this.screenHeight * 35 / 1080);  //需要监听的数据
    },
  },
  mounted() {
    console.log("没有token",);
    this.$nextTick(() => {
      const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      if (this.$store.state.settings.isFullscreen) {
        this.screenHeight = screenHeight + 120
      } else {
        this.screenHeight = screenHeight
      }
    })
    // this.connect();
  },
  beforeMount() { },
  beforeDestroy() {
    this.disconnect();
  },
  methods: {
    disconnect() {
      if (this.stompClient != null) {
        this.stompClient.disconnect();
      }
    },
    // connect() {
    //   let $this = this;
    //   let headers = {
    //     Authorization: "Bearer " + $this.$store.state.user.token,
    //   };
    //   let prefix = process.env.VUE_APP_BASE_HTTP;
    //   let socket = new SockJS(
    //     prefix + "/ops/websocket/notify?token=" + $this.$store.state.user.token
    //   ); //连接SockJS的endpoint名称为"endpointOyzc"
    //   this.stompClient = Stomp.over(socket); //使用STMOP子协议的WebSocket客户端
    //   this.stompClient.debug = null;
    //   $this.stompClient.connect(headers, function (frame) {
    //     //连接WebSocket服务端
    //     //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
    //     let subUrl = "/topic/ops/alarm/" + $this.$store.state.user.dept.deptId;
    //     $this.stompClient.subscribe(subUrl, function (response) {
    //       $this.refreshNum = $this.generateUUID();

    //       $this.responseData = JSON.parse(response.body);
    //       $this.isSubscribe = true;
    //     });
    //   });
    // },

    closeAlert() {
      this.isSubscribe = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.alert_sty /deep/ {
  background-color: #ede1cf;
  color: #e6a23c;
  position: absolute;
  width: 30%;
  left: 35%;
  top: 20%;
  z-index: 999;
  height: 130px;

  .el-alert__closebtn {
    color: inherit;
  }
}

.content-box {
  .left {
    width: 26.822%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .center {
    width: 44.27%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .right {
    width: 25.26%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .box-title {
    width: 100%;
    height: 0.4078rem;
    // background: url("~@/assets/background/titlebg.svg") center;
    // background-size: cover;
    font-size: 0.2rem;
    display: flex;
    align-items: center;
    padding-left: 0.3rem;
    font-weight: bold;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      border-left: 0.18rem solid #2fe0ff;
      border-bottom: 0.14rem solid transparent;
      border-top: 0.14rem solid transparent;
      border-radius: 4px;
    }

    &::after {
      content: '';
      font-size: 0.2rem;
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-style: italic;
      font-weight: bold;
      width: 33px;
      height: 10px;
      background: url("~@/assets/background/xiegang.svg") center;
      background-size: cover;
    }

    &.xiegang1::after {
      background: url("~@/assets/background/xiegang1.svg") center;
      background-size: cover;
    }

    &.xiegang2::after {
      background: url("~@/assets/background/xiegang2.svg") center;
      background-size: cover;
    }
  }

  .box-title-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &.box1 {
      top: 0;
      bottom: auto;
      margin-top: 0.17rem;
    }

    .box-title2 {
      height: 0.4078rem;
      font-size: 0.2rem;
      display: flex;
      align-items: center;
      padding-left: 0.3rem;
      font-weight: bold;
    }

    .bt2-bg {
      background: url("~@/assets/background/titlebg2.svg") center;
      background-size: cover;
      width: 2.6rem
    }


  }
}
</style>
